<template>
    <div class="app-container">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form"  :inline="true" :model="form" label-width="130px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item v-if="hasPermission('AdminDeptsProvider.saveDept')">
                            <el-button type="primary" @click="addFn">添加</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 添加弹窗 -->
        <el-dialog
        title="添加部门"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="468px">
            <!-- 输入框 -->
            <el-form :inline="true"
            label-width="80px"
            :rules="rules1"
            ref="addForm"
            :model="addForm"
            label-position="right">
                <el-form-item label="部门名称" prop="deptName">
                    <el-input v-model="addForm.deptName"></el-input>
                </el-form-item>
                <el-form-item label="部门描述" prop="description">
                    <el-input v-model="addForm.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="addSubmit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="deptName"
                    label="部门"
                >
                </el-table-column>
                <el-table-column
                    prop="description"
                    label="部门描述"
                >
                </el-table-column>
                <el-table-column
                    prop="createdDate"
                    label="创建时间"
                >
                </el-table-column>
                <el-table-column
                    label="状态"
                >
                    <template slot-scope="scope">
                        <el-switch
                        class="switchStyle"
                        v-model="scope.row.status"
                        @click.native="changeStatus(scope.row.id,scope.row.status)"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="0"
                        :inactive-value="1">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
                >
                <template slot-scope="scope">
                    <el-button  v-if="hasPermission('AdminDeptsProvider.updateDept')" type="text" size="small" @click="editFn(scope.row.id,scope.row.deptName,scope.row.description)">编辑</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 编辑弹窗 -->
            <el-dialog
            title="编辑部门"
            :visible.sync="dialogVisi"
            :before-close="handClose"
            width="468px">
                <!-- 输入框 -->
                <el-form :inline="true"
                label-width="80px"
                :rules="rules2"
                ref="editForm"
                :model="editForm"
                label-position="right">
                    <el-form-item label="部门名称" prop="deptName">
                        <el-input v-model="editForm.deptName"></el-input>
                    </el-form-item>
                    <el-form-item label="部门描述" prop="description">
                        <el-input v-model="editForm.description"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handClose()">取 消</el-button>
                    <el-button type="primary" @click="editSubmit()">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listForm.pageNum"
                    :page-sizes="page_sizes"
                    :page-size="listForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totals">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { listAdminDepts,saveDept,updateDeptsStatus,updateDept } from '@/api/departmentManage'

export default {
    name:"departmentManageIndex",
    data(){
        return{
            val:"1",
            dates:"",
            dialogVisible:false,
            dialogVisi:false,
            tableLoading:true,
            form:{
                pageNum:1,
                pageSize:10,
            },
            rules1:{
                deptName: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入部门描述', trigger: 'blur' }
                ],
            },
            rules2:{
                deptName: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入部门描述', trigger: 'blur' }
                ],
            },
            editForm:{
                id:null,
                deptName:null,
                description:null
            },
            addForm:{
                deptName:null,
                description:null
            },
            tableData: [],
            roleOptions:[],
            page_sizes:[10,30,50,100],
            page_totals:60,
            listForm:{
                pageNum:1,
                pageSize:10,
            },
        }
    },
    filters:{
        cardType: function(e){
            return window.helper.cardType(String(e))
        },
    },
    inject:['reload'],
    mounted(){
        this.getList(this.listForm)
        this.roleOptions = window.helper.roleFn('listReturn')
    },
    methods:{
        //按钮权限
        hasPermission(e){
            return window.helper.hasPermission(e)
        },
        //上下架与状态修改
        changeStatus(id,status){
            let datas = {
                id,
                status
            }
            console.log(datas)
            updateDeptsStatus(datas).then(res =>{
                console.log(res)
                if(res.data.code === 0){
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }else{
                    this.$message.error('修改失败');
                }
                this.reload()
            })
            .catch(error=>{
                this.$message.error(error);
            })
            // console.log(datas)
        },
        //添加方法
        addFn(){
            this.addForm.deptName = ""
            this.addForm.description = ""
            this.dialogVisible = true
        },
        //弹窗关闭
        handleClose(){
            this.dialogVisible = false
        },
        // 添加提交
        addSubmit(){
            // console.log(this.addForm)
            this.$refs["addForm"].validate((valid) => {
                if (valid) {
                    let datas = this.addForm
                    saveDept(datas).then(res=>{
                        console.log(res)
                        if(!res.data.code){
                            this.succStatus("添加")
                        }else{
                            this.$message.error(res.data.msg)
                        }
                        this.reload()
                    })
                    .catch(error=>{
                        this.$message.error(error)
                        this.reload()
                    })
                    this.dialogVisible = false
                }else{
                    this.$message({
                        message: '必填项不能为空',
                        type: 'warning'
                    });
                }
            })
        },
        //修改弹窗关闭
        handClose(){
            this.dialogVisi = false
        },
        //修改弹窗
        editFn(id,n,d){
            // console.log(n)
            this.editForm.id = id
            this.editForm.deptName = n
            this.editForm.description = d
            this.dialogVisi = true
        },
        //修改提交
        editSubmit(){
            this.$refs["editForm"].validate((valid) => {
                if (valid) {
                    let datas = this.editForm
                    updateDept(datas).then(res=>{
                        console.log(res)
                        if(!res.data.code){
                            this.succStatus("修改")
                        }else{
                            this.$message.error(res.data.msg)
                        }
                        this.reload()
                    })
                    .catch(error=>{
                        this.$message.error(error)
                        this.reload()
                    })
                    this.dialogVisible = false
                }else{
                    this.$message({
                        message: '必填项不能为空',
                        type: 'warning'
                    });
                }
            })
        },
        //成功状态弹窗
        succStatus(txt){
            this.$message({
                message: txt+'成功',
                type: 'success'
            });
        },
        //失败状态弹窗
        errorStatus(txt){
            this.$message.error(txt+'失败');
        },
        //列表数据获取
        getList(e){
            this.tableLoading = true
            let datas = e
            listAdminDepts(datas).then(res => {
                if(!res.data.code){
                    // console.log(res)
                    this.tableData = res.data.data.deptDTOS
                    this.page_totals = res.data.data.count
                }else{
                    this.$message.error(res.data.msg);
                }
                this.tableLoading = false
            })
            .catch(error =>{
                this.$message.error(error);
            })
        },
        //改变页面条数
        handleSizeChange(val) {
            this.form.pageSize = val
            this.getList(this.form)
        },
        //选择页数
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.getList(this.form)
        }
    }
}
</script>
<style scoped>
/* 分页 */
.pagesCon{height: 40px;margin-top: 20px}
.pagesCon>div{float: right;}
</style>
